<template>
	<view class="warp">
		<!-- 自定义导航栏 -->
		<uni-nav-bar title="星座详情" background-color="#d2dfff" color="#0b2659" 
		:border="false" :fixed="false" @clickLeft="left"
		  left-icon="left"  leftWidth="100rpx" rightWidth="10rpx" 
		  :statusBar="true" height="88rpx">
		 
		</uni-nav-bar>
		<view  v-if="!auditShow">
			<other></other>
		</view>
		<view class="star_box" v-if="auditShow">
			<view class="s_name_box">
				<view class="snb_left">
					<view class="l_name">
						{{starname.name}}
					</view>
					<view class="l_date">
						<span style="padding-right: 16rpx;">{{starname.enname}}</span>
						<span style="padding-right: 16rpx;">{{starname.datef}}</span>
						<span style="">{{starname.type}}象星座</span>
					</view>
				</view>
				<view class="snb_right">
					<uni-icons color="#83c2fa" custom-prefix="iconfont" :type="starname.icon" size="50"></uni-icons>
					<!-- <image style="width: 100rpx;height: 100rpx;border-radius: 25rpx;" :src="starname.imageUrl" mode=""></image> -->
				</view>
			</view>
			<!-- 星座运势 -->
			<view class="horoscope">
				<view class="h_title" style="color: #bb9435;">
				<span>{{starname.name}}</span><span style="width: 4rpx ;height: 4rpx; background-color: black; display: inline-block;border-radius: 50%;margin: 0 10rpx;line-height: 20rpx;"></span><span >星座运势</span>
				</view>
				<view class="h_table_box">
					<view class="h_table_list">
						<view @click="changeindxfn(index)" class="h_table_item" v-for="(item,index) in datelist" :key="index">
							<view class="ht_cont" :class="changeindex==index?'changesty':''" >
								{{item.name}}
							</view>
						</view>
					</view>
					<!-- 运势内容 今日明日 -->
					<view class="h_table_contbox" v-if="horeinfo && changeindex<=1">
						<!-- d打分 -->
						<view class="htc_top">
							<view class="top_left">
								<view class="numsort_cont" >
									<span style="font-size: 50rpx; font-weight: 550;" v-if="horeinfo.all">{{horeinfo.all}}</span>
									<!-- <span style="font-size: 38rpx; margin-left: 10rpx;color: #8b490c;">分</span> -->
								</view>
								<view class="number_star">
									<uni-icons v-if="horeinfo.all>=20" type="star-filled" color="#bb9435" size="20"></uni-icons>
									<uni-icons v-if="horeinfo.all>=40" type="star-filled" color="#bb9435" size="20"></uni-icons>
									<uni-icons v-if="horeinfo.all>=60" type="star-filled" color="#bb9435" size="20"></uni-icons>
									<uni-icons v-if="horeinfo.all>=80" type="star-filled" color="#bb9435" size="20"></uni-icons>
									<uni-icons v-if="horeinfo.all>=100" type="star-filled" color="#bb9435" size="20"></uni-icons>
									
									 <uni-icons v-if="horeinfo.all<100" type="star" size="20"></uni-icons>
									 <uni-icons v-if="horeinfo.all<80" type="star" size="20"></uni-icons>
									 <uni-icons v-if="horeinfo.all<60" type="star" size="20"></uni-icons>
									 <uni-icons v-if="horeinfo.all<40" type="star" size="20"></uni-icons>
									 <uni-icons v-if="horeinfo.all<20" type="star" size="20"></uni-icons>
								</view>
							</view>
							<view class="top_right">
								<view class="tr_item" v-if="horeinfo.health">
									<view class="text">
										健康
									</view>
									<progress class="progress"  :percent="horeinfo.health" stroke-width="8" activeColor="#84c0fa" backgroundColor='#eaf1fe' border-radius="10" />
								</view>
								<view class="tr_item" v-if="horeinfo.work">
									<view class="text">
										事业
									</view>
									<progress class="progress"  :percent="horeinfo.work" stroke-width="8" activeColor="#84c0fa" backgroundColor='#eaf1fe' border-radius="10" />
								</view>
								<view class="tr_item" v-if="horeinfo.love">
									<view class="text">
										爱情
									</view>
									<progress class="progress" :percent="horeinfo.love" stroke-width="8" activeColor="#84c0fa" backgroundColor='#eaf1fe' border-radius="10" />
								</view>
								
								<view class="tr_item" v-if="horeinfo.money">
									<view class="text">
										财富
									</view>
									<progress class="progress"  :percent="horeinfo.money" stroke-width="8" activeColor="#84c0fa" backgroundColor='#eaf1fe' border-radius="10" />
								</view>
							</view>
						</view>
						<view class="htc_bottom">
							<view class="htcn_text" v-if="horeinfo.summary">
								{{horeinfo.summary}}
							</view>
						</view>
					</view>
					<!-- 本周，本月 -->
					<view class="hct_w_m_box" v-if="changeindex==2 || changeindex==3">
						<view class="wm_title" v-if="changeindex==3 && horeinfo.all">
							总体运势
						</view>
						<view class="jiankang wm_item" v-if="changeindex==3 && horeinfo.all">
							<uni-icons style="padding-top: 4rpx;padding-right: 8rpx;" color="#a9691e" type="circle" size="12"></uni-icons>
							<view class="wm_cont">
								{{horeinfo.all}}
							</view>
						</view>
						<view class="wm_title">
							健康运势
						</view>
						<view class="jiankang wm_item" v-if="horeinfo.health">
							<uni-icons style="padding-top: 4rpx;padding-right: 8rpx;" color="#a9691e" type="circle" size="12"></uni-icons>
							<view class="wm_cont">
								{{horeinfo.health}}
							</view>
						</view>
						<view class="wm_title">
							事业运势
						</view>
						<view class="jiankang wm_item" v-if="horeinfo.work">
							<uni-icons style="padding-top: 4rpx;padding-right: 8rpx;" color="#a9691e" type="circle" size="12"></uni-icons>
							<view class="wm_cont">
								{{horeinfo.work}}
							</view>
						</view>
						<view class="wm_title">
							爱情运势
						</view>
						<view class="jiankang wm_item" v-if="horeinfo.love">
							<uni-icons style="padding-top: 4rpx;padding-right: 8rpx;" color="#a9691e" type="circle" size="12"></uni-icons>
								{{horeinfo.love}}
						</view>
						<view class="wm_title">
							财富运势
						</view>
						<view class="jiankang wm_item" v-if="horeinfo.money">
							<uni-icons style="padding-top: 4rpx;padding-right: 8rpx;" color="#a9691e" type="circle" size="12"></uni-icons>
							{{horeinfo.money}}
						</view>
					</view>
					<!-- 本年 -->
					<view class="hct_w_m_box" v-if="changeindex==4">
						<view class="wm_title">
							总体运势
						</view>
						<view class="jiankang wm_item" >
							<uni-icons style="padding-top: 4rpx;padding-right: 8rpx;" color="#a9691e" type="circle" size="12"></uni-icons>
							<view class="wm_cont" v-if="horeinfo.mima.text[0]">
								<span style="font-size: 28rpx;font-weight: 550;margin-right: 8rpx;">关键词:</span><span style="color: #a9691e;font-weight: 550; font-size: 28rpx;">{{horeinfo.mima.info}}</span>
								<view class="" style="margin-top: 10rpx;">
									{{horeinfo.mima.text[0]}}
								</view>
							</view>
						</view>
						<view class="wm_title">
							健康运势
						</view>
						<view class="jiankang wm_item" v-if="horeinfo.health[0]">
							<uni-icons style="padding-top: 4rpx;padding-right: 8rpx;" color="#a9691e" type="circle" size="12"></uni-icons>
							<view class="wm_cont">
								{{horeinfo.health[0]}}
							</view>
						</view>
						<view class="wm_title">
							事业运势
						</view>
						<view class="jiankang wm_item" v-if="horeinfo.career[0]">
							<uni-icons style="padding-top: 4rpx;padding-right: 8rpx;" color="#a9691e" type="circle" size="12"></uni-icons>
							<view class="wm_cont">
								{{horeinfo.career[0]}}
							</view>
						</view>
						<view class="wm_title">
							爱情运势
						</view>
						<view class="jiankang wm_item" v-if="horeinfo.love[0]">
							<uni-icons style="padding-top: 4rpx;padding-right: 8rpx;" color="#a9691e" type="circle" size="12"></uni-icons>
								{{horeinfo.love[0]}}
						</view>
						<view class="wm_title">
							财富运势
						</view>
						<view class="jiankang wm_item" v-if="horeinfo.finance[0]">
							<uni-icons style="padding-top: 4rpx;padding-right: 8rpx;" color="#a9691e" type="circle" size="12"></uni-icons>
							{{horeinfo.finance[0]}}
						</view>
					</view>
					
					<!-- 性格分析 -->
					<view class="xingge_box">
						<view class="x_table_list">
							<view @click="changexinge(index)" class="x_table_item" v-for="(item,index) in 3" :key="index">
								<view class="xt_cont" :class="xingge==index?'changesty':''" >
								{{nameinfo}}<span v-if="index==1">男</span> <span v-if="index==2">女</span> 性格
								</view>
							</view>
						</view>
						<view class="xt_cont_tetx">
							<view class="xtc_list">
								<view class="xtc_text" v-for="(item,index) in xingelist">
									<uni-icons style="padding-top: 4rpx;padding-right: 8rpx;" color="#a9691e" type="circle" size="12"></uni-icons>
								     <view class="">
								     	<span style="font-weight: 550;margin-right: 16rpx;color: #bb9435;">{{item.slice(0,6)}}</span>
										<span style="letter-spacing: 2rpx;">{{item.slice(7,)}}</span>
								     </view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import other from '@/components/other/index.vue'
	export default {
		components:{other},
		data() {
			return {
				auditShow:true,
				starname:{},
				startype:'',//传入星座
				datetype:'today',
				ranglist3:['today','tomorrow','week','month','year'],
				changeindex:0,
				datelist:[{name:'今日'},{name:'明日'},{name:'本周'},{name:'本月'},{name:'今年'},],
				xingge:0,
				datelist2:[{name:'水瓶座性格'},{name:'水瓶座男性格'},{name:'水瓶座女性格'},],
				horeinfo:'',//运势数据
				starimages:[
					{name:'水瓶座',type:'风',enname:'Aquarius',datef:'1.20-2.18',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/shuiping_1.jpg',icon:'icon-shuipingzuo'},
					{name:'双鱼座',type:'水',enname:'Pisces',datef:'2.19-3.20',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/shuangyu_1.jpg',icon:'icon-shuangyuzuo'},
					{name:'白羊座',type:'火',enname:'Aries',datef:'3.21-4.19',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/baiyang_1.jpg',icon:'icon-muyangzuo'},
					{name:'金牛座',type:'土',enname:'Taurus',datef:'4.20-5.20',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/jinniu_1.jpg',icon:'icon-jinniuzuo'},
					{name:'双子座',type:'风',enname:'Gemini',datef:'5.21-6.21',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/shuangzi_1.jpg',icon:'icon-shuangzizuo'},
					{name:'巨蟹座',type:'水',enname:'Cance',datef:'6.22-7.22',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/juxie_1.jpg',icon:'icon-juxiezuo'},
					{name:'狮子座',type:'火',enname:'Leo',datef:'7.23-8.22',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/shizi_1.jpg',icon:'icon-shizizuo'},
					{name:'处女座',type:'土',enname:'Virgo',datef:'8.23-9.22',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/chunv_1.jpg',icon:'icon-chunvzuo'},
					{name:'天秤座',type:'风',enname:'Libra',datef:'9.23-10.23',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/tiancheng_1.jpg',icon:'icon-tianchengzuo'},
					{name:'天蝎座',type:'水',enname:'Scorpio',datef:'10.24-11.22',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/tianxie_1.jpg',icon:'icon-tianhezuo'},
					{name:'射手座',type:'火',enname:'Sagittarius',datef:'11.23-12.21',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/sheshou_1.jpg',icon:'icon-sheshouzuo'},
					{name:'摩羯座',type:'土',enname:'Capricornus',datef:'12.22-1.19',imageUrl:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/ba_star/mojie_1.jpg',icon:'icon-mojiezuo'},
					],
					xinggeinfo:{},//性格数据
					xingeall:[],
					xingenan:[],
					xingenv:[],
					xingelist:[],
					nameinfo:''
			};
		},
		onLoad(options) {
			this.startype=options.startype
			if(this.startype){
				this.updatetarinfo(this.startype)
			this.gethoreinfo()
			this.getxinggeinfo()
			}
		},
		onShow(){
			this.getAudit()
		},
		methods:{
			left(){
				uni.navigateBack({delta:1})
			},
			//获取微信审核开关
			getAudit(){
			    let param = {};
				param.url='v3/system/front/configuration/1'
				this.$request(param).then(res=>{
					this.auditShow=res.data.auditSwitch
					if(this.auditShow){
						uni.setNavigationBarTitle({
							title:'星座详情'
						})
					}
					
				})
			},
			// tabe切换
			changeindxfn(val){
				if(val>1){
					console.log('zanwu');
					this.changeindex=val
					this.datetype=this.ranglist3[val]
					this.gethoreinfo()
					
				}else{
					this.changeindex=val
					this.datetype=this.ranglist3[val]
					this.gethoreinfo()
				}
				
				
			},
			// 性格切换
			changexinge(val){
				this.xingge=val
				if(val==0){
					this.xingelist=this.xingeall
				}else if(val==1){
					this.xingelist=this.xingenan
				}else if(val==2){
					this.xingelist=this.xingenv
				}
			},
			//获取运势数据
			gethoreinfo(){
				uni.request({
					url:'http://web.juhe.cn/constellation/getAll',
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method:'GET',
					
					data:{
						consName:this.startype,//关键字
						type:this.datetype,
						key:'4562af3be155424074f51dca190079f6',
					},
					success: (res) => {
					        console.log('res',res);
							this.horeinfo=res.data
							
					},
					fail: (err) => {
					    console.error('请求失败:', err);
					  }
				})
			},
			// 获取性格数据
			getxinggeinfo(){
				this.$request({
					url:"v3/front/star/detail",
					method:"GET",
					data:{name:this.startype}
				}).then(res=>{
					this.xinggelinfo=res.data
					this.nameinfo=res.data.baZiValue1
					console.log(res,112,this.nameinfo,this.xinggelinfo);
					const regex = /\d+\./g;
					const array1 = this.xinggelinfo.baZiValue7.split(regex).filter(Boolean); // 使用 filter(Boolean) 去掉空字符串
				    this.xingeall = array1.map((item, index) => `${index + 1}.${item}`);
					this.xingelist=this.xingeall
					const array2=this.xinggelinfo.baZiValue8.split(regex).filter(Boolean); 
					this.xingenan=array2.map((item, index) => `${index + 1}.${item}`);
				    const array3=this.xinggelinfo.baZiValue9.split(regex).filter(Boolean); 
					this.xingenv=array3.map((item, index) => `${index + 1}.${item}`);
				})
			},
			// 处理数据
			updatetarinfo(val){
				this.starimages.forEach(item=>{
					if(val==item.name){
						
						this.starname=item
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
page{
	padding: 20rpx;
	background-color: #d5e0fe;
	color: #426195;
}
.warp{
	font-size: 24rpx;
	padding: 16rpx;
	.title_box{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left{
			display: flex;
			align-items: center;
			.left_text{
				font-size: 15px;
				margin-right: 10rpx;
				
			}
			.left_icon{
				width: 15px;
				height: 15px;
				text-align: center;
				line-height: 15px;
				border: 2rpx solid #323333;
				border-radius: 50%;
				
			}
			
		}
	}
	.star_box{
		background-color: #d5e0fe;
		padding: 20rpx;
		border-radius: 10rpx;
		// 星座名称
		.s_name_box{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.snb_left{
				.l_name{
					font-size: 34rpx;
					color: #426195;
					font-weight: 550;
					padding: 10rpx 0;
				}
				.l_date{
					font-size: 24rpx;
					color: #426195;
					font-weight: 550;
				}
			}
			.snb_right{
				width: 130rpx;
				height: 130rpx;
				text-align: center;
				line-height: 13 0rpx;
				border: 2rpx solid #e4f8ff;
				background-color: #d4ebfd;
				border-radius: 30rpx;
			}
		}
		.horoscope{
			padding: 20rpx 0;
			.h_title{
				font-size: 27rpx;
				// font-weight: 550;
				
			}
			.h_table_box{
				margin-top: 16rpx;
				.h_table_list{
					display: flex;
					justify-content: space-between;
					background-color: #d5e0fe;
					padding: 8rpx 6rpx;
					border-radius: 10rpx;
					.h_table_item{
						width: 20%;
						height: 100%;
						font-size: 32rpx;
						.ht_cont{
							// background-color: #fff;
							text-align: center;
							border-radius: 10rpx;
							padding: 8rpx 0;
							color: #0c255b;
						}
						.changesty{
							padding: 8rpx 0;
							text-align: center;
							border-radius: 8rpx;
							background-color: #bbcdfe;
							color: #426195;
							font-weight: 550;
						}
					}
				}
				.h_table_contbox{
					margin-top: 30rpx;
					background-color: #d5e0fe;
					padding: 16rpx;
					border-radius: 10rpx;
					.htc_top{
						display: flex;
						justify-content: space-between;
						align-items: center;
						color: #0c255b;
						.top_left{
							text-align: center;
							width: 40%;
							
						}
						.top_right{
							width: 60%;
							.tr_item{
								.text{
									padding: 2rpx 0;
									color: #0c255b;
								}
								// display: flex;
								// align-items: center;
							}
						}
					}
					.htc_bottom{
						margin-top: 10rpx;
						.htcn_text{
							padding: 10rpx;
							letter-spacing: 2rpx;
							// color: #0c255b;
						}
					}
				}
				// 本周本月
				.hct_w_m_box{
					margin-top: 30rpx;
					background-color: #d5e0fe;
					padding: 16rpx;
					border-radius: 10rpx;
					.wm_title{
						font-size: 30rpx;
						font-weight: 550;
						color: #bb9435;
						margin-top: 10rpx;
					}
					.wm_item{
						display: flex;
						align-items: top;
						letter-spacing: 2rpx;
						padding: 10rpx 0;
						// color: #0c255b;
					}
				}
				.xingge_box{
					margin-top: 30rpx;
					.x_table_list{
						display: flex;
						justify-content: space-between;
						background-color: #d5e0fe;
						padding: 8rpx 6rpx;
						border-radius: 10rpx;
						.x_table_item{
							width: 30%;
							height: 100%;
							font-size: 28rpx;
							.xt_cont{
								// background-color: #fff;
								text-align: center;
								border-radius: 10rpx;
								padding: 10rpx 0;
								// color: #0c255b;
							}
							.changesty{
								text-align: center;
								border-radius: 8rpx;
								background-color: #bbcdfe;
								color:#426195;
								font-weight: 550;
								padding: 10rpx 0;
							}
						}
					}
					.xt_cont_tetx{
						margin-top: 16rpx;
						.xtc_list{
							.xtc_text{
								font-size: 26rpx;
								letter-spacing: 2rpx;
								display: flex;
								align-items: top;
								// color: #0c255b;
							}
						}
					}
				}
			}
			
			
		}
		
	}
}

</style>
